<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <!-- <style>
        *{margin: 0; padding: 0;}
        .box{width: 100px; height: 1000px; padding: 10px 20px; background: pink; border: 5px solid #000;}
        </style>
             
        <div class="box"></div>

        <script>
            var c = console.log.bind(document)
            var odiv = document.getElementsByClassName('box')[0]

            // 获取元素的宽+padding和高+padding方法；不包含边框
            c(odiv.clientWidth)
            c(odiv.clientHeight)

            // 获取元素的边框   只能直接拿左和上
            c(odiv.clientLeft)
            c(odiv.clientTop)

            // 通过body获取样式宽度
            c(document.body.clientHeight)   // 获取 body 的可视化高度
            c(document.body.clientWidth)    // 获取 body 的可视化宽度

            // 通过 HTML 获取样式 宽高
            c(document.documentElement.clientHeight)   // 获取 HTML 的可视化高度
            c(document.documentElement.clientWidth)    // 获取 HTML 的可视化宽度
         -->
<!-- </script> -->

<!-- offsetWidth 获取元素的长度 width + padding + border -->
<!-- <style>
    *{margin: 0; padding: 0;}
    .box{width: 100px; height: 1000px; padding: 10px 20px; background: pink; border: 5px solid #000;}
</style>
<div class="box"></div>
<script>
    var c = console.log.bind(document)
    var odiv = document.getElementsByClassName('box')[0]

    c(odiv.offsetWidth)     // 100 + 40 + 10
    c(odiv.offsetHeight)    // 1000 + 20 + 10
</script> -->

<!-- <style>
    *{margin: 0; padding: 0;}
    .box1{width: 100px; height: 100px; background: pink; border: 1px solid #000; margin: 100px; position: relative;}
    .box2{width: 30px; height: 30px; background: yellowgreen; margin-left: 10px; margin-top: 10px;}
    </style>
    
    <div class="box1">
        <div class="box2"></div>
    </div>
          
    <script>
        var c = console.log.bind(document)
        var box1=document.getElementsByClassName("box1")[0]
        var box2=document.getElementsByClassName("box2")[0]
        c(box2.offsetLeft)
        c(box2.offsetTop)
</script> -->
<style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 400px;
        height: 300px;
        overflow: auto;
    }
    p{
        width: 400px;
    }
</style>

<body>
    
<div>
	<p>
   永和九年，时在癸丑之年，三月上旬，我们会集在会稽郡山阴城的兰亭，为了做禊事。众多贤才都汇聚到这里 永和九年，时在癸丑之年，三月上旬，我们会集在会稽郡山阴城的兰亭，为了做禊事。众多贤才都汇聚到这里 永和九年，时在癸丑之年，三月上旬，我们会集在会稽郡山阴城的兰亭，为了做禊事。众多贤才都汇聚到这里 永和九年，时在癸丑之年，三月上旬，我们会集在会稽郡山丑之年，三月上旬，我们会集在会稽郡山丑之年，三月上旬，我们会集在会稽郡山丑之年，三月上旬，我们会集在会稽郡山丑之年，三月上旬，我们会集在会稽郡山丑之年，三月上旬，我们会集在会稽郡山丑之年，三月上旬，我们会集在会稽郡山丑之年，三月上旬，我们会集在会稽郡山丑之年，三月上旬，我们会集在会稽郡山丑之年，三月上旬，我们会集在会稽郡山丑之年，三月上旬，我们会集在会稽郡山丑之年，三月上旬，我们会集在会稽郡山丑之年，三月上旬，我们会集在会稽郡山丑之年，三月上旬，我们会集在会稽郡山阴城的兰亭，为了做禊事。众多贤才都汇聚到这里，年龄大的小的都聚集在这里。兰亭这个地方有高峻的山峰，茂盛的树林，高高的竹子。又有清澈湍急的溪流，辉映环绕在亭子的四周，我们引溪水作为流觞的曲水，排列坐在曲水旁边，虽然没有演奏音乐的盛况，但喝点酒，作点诗，也足够来畅快叙述幽深内藏的感情了。这一天，天气晴朗，和风温暖，仰首观览到宇宙的浩大，俯看观察大地上众多的万物，用来舒展眼力，开阔胸怀，足够来极尽视听的欢娱，实在很快乐。人与人相互交往，很快便度过一生。有的人从自己的情趣思想中取出一些东西，在室内（跟朋友）面对面地交谈；有的人通过寄情于自己精神情怀所寄托的事物，在形体之外,不受任何约束地放纵地生活。虽然各有各的爱好，安静与躁动各不相同，但当他们对所接触的事物感到高兴时，一时感到自得，感到高兴和满足，竟然不知道衰老将要到来。等到对得到或喜爱的东西已经厌倦，感情随着事物的变化而变化，感慨随之产生。过去所喜欢的东西，转瞬间，已经成为旧迹，尚且不能不因为它引发心中的感触，况且寿命长短，听凭造化，最后归结于消灭。古人说：“死生毕竟是件大事啊。”怎么能不让人悲痛呢？每当看到前人所发感慨的原因，其缘由像一张符契那样相和，总难免要在读前人文章时叹息哀伤，不能明白于心。本来知道把生死等同的说法是不真实的，把长寿和短命等同起来的说法是妄造的。后人看待今人，也就像今人看待前人，可悲呀。所以一个一个记下当时与会的人，录下他们所作的诗篇。纵使时代变了，事情不同了，但触发人们情怀的原因，他们的思想情趣是一样的。后世的读者，也将对这次集会的诗文有所感慨。
	</p>
</div>

<script>
    var  op =document.getElementsByTagName('p')[0]
    var  odiv =document.getElementsByTagName('div')[0]

    odiv.onscroll=function(){
        //op 被卷曲的高度
        console.log(this.scrollTop);
    }
    // onscroll : 滚动事件
    // window.onscroll: window 滚动事件
    // document.body.onscroll: bodyh 滚动事件
    // document.onscroll: HTML 滚动事件

    // document.documentElement.scrollTop: 获取页面被卷曲的高度
    // docunent.documentElement.scrollLeft: 获取页面卷曲的宽度

    //实际的内容宽高
    console.log(odiv.scrollHeight); 	//924   956   32

</script>
</body>
</html>